<template>
  <div>
    <!-- 图片裁剪 -->
    <div class="cropper-container" v-show="state.isShowDialog">
      <div class="scrip-box">
        <VuePictureCropper :boxStyle="{
            width: '100%',
            height: '100%',
            backgroundColor: '#000',

            margin: 'auto',
          }" :img="state.pic" :options="{
      viewMode: 1,
      dragMode: 'crop',
      aspectRatio: 1 / 1,
      backgroundImage:'none'
    }" />
      </div>
      <div class="btn-container">
        <var-button @click="state.isShowDialog = false" type="primary">取消</var-button>
        <var-button @click="getResult" type="primary">保存</var-button>
      
      </div>
    </div>
    <!-- 图片上传 -->
    <div class="text">
      <van-button @click="open" type="default" class="select-picture">
        <van-icon name="plus" />
        <input id="inputFIle" ref="uploadInput" type="file" accept="image/jpg, image/jpeg, image/png, image/gif"
          @change="selectFile" />
      </van-button>
    </div>
  </div>
</template>

<script>
/**
 * @description 一个仿微信头像上传前裁剪图片的组件
 * API:getImgBase64
 */
import { ref, reactive, onMounted } from "vue"
import "cropperjs/dist/cropper.css";
import VuePictureCropper, { cropper } from 'vue-picture-cropper'
export default {
  name: "ImageCropper",
  props: {
    initParams: Object,
    successCallBack: {
      type: Function,
      default: () => { }
    }
  },
  emits: ["onClick"],
  components: {
    VuePictureCropper
  },
  setup(props, ctx) {
    const uploadInput = ref(null)
    const state = reactive({
      dataURL: "",
      blobURL: "",
      isShowDialog: false,
      pic: ""
    })

    // 触发打开选择文件
    const open = () => {
      console.log(uploadInput)
      // uploadInput.value.onclick()
    }

    // 选择文件
    const selectFile = ({ target }) => {
      // 重置上次的结果
      state.blobURL = ""
      state.dataURL = ""
      // 如果有多个裁剪框，也需要重置掉裁剪目标的值
      state.pic = ""
      console.log("重置了state")


      // 获取选取的文件
      const { files } = target
      if (!files) return;
      const file = files[0]
      console.log("文件：", file)

      // 转为base64转给裁剪组件
      const reader = new FileReader()
      reader.readAsDataURL(file)
      console.log("reader", reader)
      reader.onload = () => {
        // 更新裁剪弹窗图片源
        state.pic = String(reader.result)
        // 显示裁剪弹窗
        state.isShowDialog = true

        // 清空已选择的文件
        if (!uploadInput.value) return;
        uploadInput.value.value = ""
      }

    }

    // 获取裁剪结果
    const getResult = async () => {
      const base64 = cropper.getDataURL()
      const blob = await cropper.getBlob()

      // 获取生成的file文件信息
      const file = await cropper.getFile({
        fileName: "image"
      })
      console.log("裁剪结果：\n", {
        base64,
        blob,
        file
      })
      ctx.emit("onClick", {
        base64,
        blob,
        file
      })
      // 
      state.isShowDialog=false

    }

    // 清除裁剪框
    const clear = () => {
      cropper.clear()
    }

    // 重置默认裁剪区域
    const reset = () => {
      cropper.reset()
    }
    const chooseFile = () => {
      uploadInput.value.click()
    }


    return {
      uploadInput,
      state,
      selectFile,
      clear,
      reset,
      getResult,
      open,
      chooseFile
    }
  }
};
</script>

<style lang="scss" scoped>
.cropper-bg{
  background-color: black !important;
  background-image: none !important;
}
.cropper-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: black !important;
  z-index: 9999;

  .scrip-box {
    width: 100%;
    flex: 1;
    overflow: hidden;
  }

  .btn-container {
    width: 100%;
    // height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 5px;
  }
}

.select-picture {
  position: relative;
  width: 0;
  height: 0;
  z-index: -9999999999;

  input {
    // display: none;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
  }
}
</style>